<template>
  <div>
    <Header />
    <div class="my_list">
      <div class="list_right">头像</div>
      <div class="list_text">
        <!-- <van-uploader :after-read="afterRead">
          <img :src="img" alt class="deta_head" />
          <img src="../../assets/image/gd.png" alt />
        </van-uploader>-->
        <el-upload class="avatar-uploader" :show-file-list="false" action :on-change="fileChange">
          <img :src="img" alt class="deta_head" v-if="img" />
          <img src="../../assets/img/tx.png" alt class="deta_head" v-else />
          <!-- <img src="../../assets/image/gd.png" alt /> -->
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
      </div>
    </div>
    <div class="my_list">
      <!-- <div class="list_right">昵称</div>
      <div class="list_text">
        <img src="../../assets/image/gd.png" alt />
      </div>-->
      <van-field
        v-model="input1"
        label="昵称"
        placeholder="昵称"
        input-align="right"
        label-class="list_right"
      />
    </div>
    <div class="my_list">
      <!-- <div class="list_right">生日</div>
      <div class="list_text">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          clear-icon="iconNo"
          @focus="forbid "
        ></el-date-picker>
      </div>-->
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="value1"
        label="时间选择"
        placeholder="点击选择时间"
        input-align="right"
        label-class="list_right"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          type="date"
          @cancel="showPicker = false"
          @confirm="showPicker = false"
          @change="endTimeChange"
          :min-date="minDate"
          :max-date="maxDate"
          v-model="currentDate"
        />
      </van-popup>
    </div>
    <p class="btn" @click="Onkeep">保存</p>
  </div>
</template>
<script>
import Header from "@/components/m_file/header.vue";
import rem from "@/assets/js/rem.js";
export default {
  data() {
    return {
      input1: "",
      value1: "",
      birthday: "",
      img: "",
      showPicker: false,
      uploadImg: null,
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  },
  mounted() {
    this.OngetPersonalInfo();
  },
  methods: {
    endTimeChange(e) {
      let endTimeArr = e.getValues(); //["2019", "03", "22", "17", "28"]
      this.value1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
    },
    onConfirm(time) {
      this.value1 = time;
      this.showPicker = false;
    },
    OngetPersonalInfo() {
      const userId = sessionStorage.getItem("userId");
      this.instance
        .getPersonalInfo({
          id: userId
        })
        .then(res => {
          this.input1 = res.data.data.petName;
          this.img = res.data.data.headUrl;
          this.value1 = res.data.data.birthday;
        })
        .catch(function(error) {});
    },
    Onkeep() {
      const userId = sessionStorage.getItem("userId");
      console.log(userId);
      const form = new FormData();
      if (this.uploadImg) {
        form.append("headFile", this.uploadImg);
      }
      form.append("userId", Number(userId));
      form.append("petName", this.input1);
      form.append("birthday", this.value1);
      this.instance
        .modifyPersonalInfo(form)
        .then(res => {
          this.$notify({
            message: res.data.msg,
            duration: 2000
          });
        })
        .catch(function(error) {});
    },
    // afterRead(file) {
    //   console.log(file)
    //   // this.img =
    //   this.uploadImg = file;
    // }
    fileChange(file) {
      this.img = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.file.type === "image/jpeg" || "image/jpg";
      const isLt2M = file.file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.img = "";
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.img = "";
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      this.uploadImg = file.file;
    }
  },
  components: {
    Header
  }
};
</script>
<style>
.list_right {
  float: left;
  margin-top: 0.05rem;
  font-size: 0.15rem;
  color: #333;
}
.list_text > .el-input > .el-input__inner {
  border: none;
  text-align: right;
  color: #999;
}
.list_text > .el-input > .el-input__prefix {
  display: none;
}
</style>
<style lang="less" scoped>
.my_list {
  overflow: hidden;
  margin: 0.1rem 0.15rem;
  height: 0.5rem;

  .van-cell {
    padding: 0;
  }
  .list_text {
    float: right;
    font-size: 0.14rem;
    font-weight: bold;
    color: #999;
    .ipt1 {
      border: none;
      background: none;
    }
    img {
      width: 0.06rem;
      margin-left: 0.14rem;
    }
    .deta_head {
      width: 0.36rem;
      height: 0.36rem;
    }
  }
  .list_right {
    float: left;
    margin-top: 0.05rem;
    font-size: 0.15rem;
    color: #333;
  }
}
.btn {
  position: relative;
  top: 2.5rem;
  background: linear-gradient(0deg, #ef7f00, #ef7d01);
  border-radius: 6px;
  line-height: 0.4rem;
  font-size: 0.15rem;

  margin: 0 0.3rem;
  color: #fff;
  text-align: center;
}
</style>
